<!--商品列表-->
<style lang="less" scoped>
.m-sech-wrap {
  padding-right:0.2rem;
}
.scroller-wrap {
  top:69px;
}
</style>

<template>
  <div class="contain">
    <div class="listhead-fix">
      <!-- <index-tab :status='3'></index-tab> -->
      <div class="m-sech-wrap displayflex">
        <div class="flex1">
          <router-link :to="{path:'/search',query: { type: 'place'}}" class="m-sech-box displayflex">
            <i class="iconfont icon-search"></i>
            <div class="flex1 m-sech-ipt">
              <div class="txt">{{sechTxt || '搜索商品'}}</div>
            </div>
          </router-link>
        </div>
        <!-- <router-link to="/goodsForm" class="m-sech-classfiy">
          <i class="iconfont icon-add"></i>
          <p>新增</p>
        </router-link> -->
      </div>
    </div>
    <scroller lock-x scrollbar-y use-pullup height="-117" v-if="todolist.length>0" ref="Scroller" class='scroller-wrap' :pullup-config="ScrollerConfig" @on-pullup-loading="loadMore">
      <div>
        <div class="list-goods-warp displayflex" @click="gotoDet(item)" v-for="item in todolist">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.GoodsName}}</p><!--<i class="good-licence iconfont icon-licence"></i>-->
            <p>{{item.GoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <!-- <p>供应商：{{item.ChineseName}}</p> -->
          </div>
        </div>
      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <manage-footer :status='3'></manage-footer>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
// import indexTab from '@/components/core/header/index_tab.vue';
export default {
  components: {
    manageFooter
  },
  data() {
    return {
      sechTxt:'',
      todolist: [],
      amount:0,
      totalRecords: 0,
      PageIndex: 1,
      PageSize:5,
      noMore:false,
      ScrollerConfig: {
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      }
    }
  },
  created(){
    this.sechTxt = sessionStorage.sechtxt;
    this.getData(1);
  },
  mounted() {
    this.$nextTick(function() {
    })
  },
  methods: {
    loadMore () {
      this.getData();
    },
    getData(type){
      if (type == 1) {
        this.PageIndex = 1;
        this.todolist = [];
      }
      let self = this,
          userinfo = JSON.parse(localStorage.userinfo),
          query = {
            StaffGuid: userinfo.StaffID,
            GoodsName: this.sechTxt||'',
            PageIndex: this.PageIndex,
            PageSize: this.PageSize,
            GoodsCate:sessionStorage.classfiy||'',
            IsDeleted:'N',
          };
      if (sessionStorage.getItem('sechtxt')) {
        sessionStorage.removeItem('sechtxt');
      }
      this.Ajax.post('Getmfgoods',query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if(resp.Datas !== null && resp.Datas.length > 0){
            this.PageIndex++;
            this.todolist = this.todolist.concat(resp.Datas);
            this.ScrollControl();
          }
          
        } else {
          self.Toast({
            message: resp.ErrorMessage || '操作异常，请稍后重试',
          });
        }
      });
    },
    gotoDet(val){
      sessionStorage.setItem('GoodItem', JSON.stringify(val));
      this.$router.push({
        path:'/goodsDetail'
      });
    },
    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>